import { filterAuth } from '@/support/common';
import { message, Modal, Spin, Transfer } from 'antd';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';

const mapStateToProps = (state: any) => ({
  dataPermission: state.dataPermission,
  loading: state.loading.effects['dataPermission/getData'],
});
class AccountTransfer extends PureComponent<any, any> {
  static contextTypes = {
    permissions: PropTypes.array,
  };

  constructor(props: any) {
    super(props);
    this.state = {
      visible: false,
      sid: null,
      saveLoading: false,
      dataList: [],
      targetKeys: [],
      selectedKeys: [],
    };
  }

  componentDidMount() {
    this.props.onRef(this);
  }

  open = (sid: any) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'dataPermission/getData',
      payload: { url: '/datapermission/auth/accountlist', dataPermissionSid: sid },
      callback: (res: any) => {
        let list: any = [];
        let keyList: any = [];
        res.data.map((item: any) => {
          if (item.refFlag) {
            keyList.push(item.accountSid);
          }
          list.push({
            key: item.accountSid,
            title: item.accountName,
          });
        });
        this.setState({
          sid: sid,
          dataList: list,
          targetKeys: keyList,
        });
      },
    });
    this.setState({ visible: true });
  };

  close = () => {
    this.setState({
      visible: false,
      sid: null,
      saveLoading: false,
      dataList: [],
      targetKeys: [],
      selectedKeys: [],
    });
  };

  save = () => {
    const { dispatch, handleFlushPage } = this.props;
    const { sid, targetKeys } = this.state;
    this.setState({ saveLoading: true });
    dispatch({
      type: 'dataPermission/postObjWithRes',
      payload: {
        url: '/datapermission/auth/account',
        dataPermissionSid: sid,
        accountList: targetKeys,
      },
      callback: (res: any) => {
        this.setState({ saveLoading: false });
        if (res.statusCode === '0') {
          message.success('保存成功！');
          this.setState(
            {
              visible: false,
              sid: null,
              dataList: [],
              targetKeys: [],
              selectedKeys: [],
            },
            () => {
              handleFlushPage();
            },
          );
        }
      },
    });
  };

  onChange = (newTargetKeys: any) => {
    const { pathname } = this.props;
    if (filterAuth('dataPermission_doAuthAccount', this.context.permissions, pathname)) {
      this.setState({ targetKeys: newTargetKeys });
    }
  };

  onSelectChange = (sourceSelectedKeys: any, targetSelectedKeys: any) => {
    const { pathname } = this.props;
    if (filterAuth('dataPermission_doAuthAccount', this.context.permissions, pathname)) {
      this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
    }
  };

  render() {
    const { loading, pathname } = this.props;
    const { visible, saveLoading, dataList, targetKeys, selectedKeys } = this.state;
    const hasPermission = filterAuth(
      'dataPermission_doAuthAccount',
      this.context.permissions,
      pathname,
    );
    return (
      <Modal
        centered
        visible={visible}
        onCancel={this.close}
        onOk={this.save}
        okText="保存"
        destroyOnClose
        confirmLoading={saveLoading}
        cancelButtonProps={{ size: 'small' }}
        okButtonProps={{ size: 'small', disabled: !hasPermission }}
        title="关联账号"
      >
        <Spin spinning={loading}>
          <Transfer
            dataSource={dataList}
            targetKeys={targetKeys}
            selectedKeys={selectedKeys}
            onSelectChange={this.onSelectChange}
            onChange={this.onChange}
            showSearch
            titles={['未关联', '已关联']}
            listStyle={{
              height: 470,
            }}
            render={(item: any) => item.title}
            pagination
          />
        </Spin>
      </Modal>
    );
  }
}
export default connect(mapStateToProps)(AccountTransfer);
